<template>
  <Head />

  <van-tabs
    v-model:active="active"
    background="#01121e"
    color="#f6d664"
    title-inactive-color="#fff"
    title-active-color="#f6d664"
  >
    <van-tab :title="$t('directEffectiveInvitation')"></van-tab>
    <van-tab :title="$t('effectiveTeamIinvitation')"></van-tab>
  </van-tabs>

  <div class="main">
    <div v-for="(item, index) in directPushList" :key="index" class="wallet">
      <div class="content">
        <div class="top">
          <span>{{ formatAddress(item.address) }}</span>
          <span :class="[item.nftMoney > 0 && 'nftMoney']">{{
            item.nftMoney === 0 ? $t('invalid') : item.nftMoney
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Async_recommend } from "@/server/user";
import { useRouter } from "vue-router";
import { formatAddress } from "@/utils/kit";

const router = useRouter();
const queryParam = router.currentRoute.value.query;
const active = ref(0);
const directPushList = ref([]);
const loading = ref(false);
const getList = async () => {
  try {
    loading.value = true;
    let { list }: any = await Async_recommend({
      page: 0,
      size: 999,
      all: active.value == 0 ? false : true
    });
    if (list) {
      directPushList.value = list || [];
    }
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};

watch(active, () => {
  directPushList.value = []
  getList();
});

onMounted(() => {
  active.value = Number(queryParam.type);
  getList();
});
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  padding: 12px 12px;
  height: calc(100vh - 96px);
  overflow-y: auto;
}
.wallet {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 6px;

  .content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #11202f;
    padding: 12px;
    border-radius: 6px;
    .top {
      font-size: 16px;
      color: #ccc;
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      .nftMoney {
        font-weight: bold;
        color: #f6d664;
        font-family: 'DINPro-Black"';
      }
    }
  }
}
</style>
